<template>
    <el-form ref="form" :model="system_para" label-width="80px">
  <el-card class="box-card">
                     <div class="infinite-list" v-infinite-scroll="load">
                      <el-row> 
                        <el-col :span="7">HTTP端口</el-col>
                        <el-col :span="3">:</el-col>
                        <el-col :span="7">
                          <template v-if='modform'>
                          {{system_para.http_port}}
                          </template>
                          <template v-else>
                          <el-input v-model="system_para.http_port"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="7">数据库端口</el-col>
                        <el-col :span="3">:</el-col>
                        <el-col :span="7">
                          <template v-if='modform'>
                          {{system_para.sql_port}}
                          </template>
                          <template v-else>
                          <el-input v-model="system_para.sql_port"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                       <el-row> 
                        <el-col :span="7">本机网络设置</el-col>
                        <el-col :span="3">:</el-col>
                        <el-col :span="7">
                          <template v-if='modform'>
                          {{system_para.web_set}}
                          </template>
                          <template v-else>
                            <el-input v-model="system_para.web_set"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                       <el-row> 
                        <el-col :span="7">本机服务器端口</el-col>
                        <el-col :span="3">:</el-col>
                        <el-col :span="7">
                          <template v-if='modform'>
                          {{system_para.localhost}}
                          </template>
                          <template v-else>
                          <el-input v-model="system_para.localhost"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="7">远程web服务器IP</el-col>
                        <el-col :span="3">:</el-col>
                        <el-col :span="7" >
                        <template v-if='modform'>
                          {{system_para.web_ip}}
                          </template>
                          <template v-else>                          
                            <el-input v-model="system_para.web_ip"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="7">远程web服务器端口</el-col>
                        <el-col :span="3">:</el-col>
                        <el-col :span="7">
                          <template v-if='modform'>
                          {{system_para.web_port}}
                          </template>
                          <template v-else>
                          <el-input v-model="system_para.web_port"></el-input>
                          </template>
                        </el-col>
                      </el-row>
         </div> 
          </el-card>
  <!-- <el-form-item>
     <template v-if="modform">
                    <el-button type="primary" @click="modform =false">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button>返回</el-button>
  </el-form-item> -->
</el-form>
</template>

<script>
import axios from '../plugins/axios'  //在哪里用就在哪里引入
// require('@/mock/system_parameter.js')
  export default {
      
    data() {
      return {
        system_para:{},
        modform:true
      }
    },
    created:function(){
        axios.get('/action/system_parameter')
        .then(response=>{
             console.log(response);
            this.system_para=response.data.system_para;
            //console.log(this.device_info);
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })      
    },
    methods: {
        load(){},
      saveModform() {
        console.log('submit!');
      }
    }
  }
</script>
<style>
.el-card{
    position:absolute;
    left: 14.5%;
    width: 82%;
    top:14.97%;
    padding: 3px;
    margin: 0px;
    height: 82%;
    font-size: 20px;
}
.el-form-item__content{
  position: absolute;
  top:70%;
  left: 70%;
}

</style>
